import {
  Button,
  Form,
  FormItem,
  Image,
  Input,
  InputNumber,
  message,
  Modal,
  Space
} from 'ant-design-vue'
import { title } from 'process'
import { defineComponent, onMounted, ref } from 'vue'
import { values } from 'xe-utils'

import { cinemaApi, marketingApi } from '@/apis'
import qzyApi from '@/apis/qzyApi'
import { qzyTopBannerItem } from '@/apis/qzyType'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import UploadFile from '@/components/UploadFile'
import { TABLE_FORMAT, TABLE_ITEM_RENDER, TABLE_RENDERER } from '@/constants'
import { useBack, useDialog } from '@/hooks'

export default defineComponent({
  name: 'QzyHomeConfiguration',
  setup() {
    const consultationUrl = ref('')
    const isAddStyle = ref(true)
    const liveBookingTitle = ref('')
    const datas = ref([] as any)
    const { handleCancel } = useBack('refreshCouponManage')
    const curOptionItem = ref({} as qzyTopBannerItem)
    const confirmLoading = ref(false)
    const showDialog = ref(false)
    const dialogLoading = ref(false)
    const { showConfirm } = useDialog()
    const tableRef = ref({} as ProTableRef)
    const tableConfig = ref({
      options: {
        border: true,
        align: 'center',
        toolbarConfig: {
          slots: {
            buttons: 'addStyle'
          }
        },
        columns: [
          {
            title: '序号',
            field: 'sequence',
            width: '180'
          },
          {
            title: 'Banner',
            field: 'bannerImg',
            slots: {
              default: 'bannerImage'
            }
          },
          {
            title: '操作',
            fixed: 'right',
            width: '200',
            slots: {
              default: 'operation'
            }
          }
        ],

        proxyConfig: {
          props: {
            result: 'data'
          },
          ajax: {
            query: async () => {
              const data = await qzyApi.getQzyTopBannerList()
              datas.value = [...data]
              return data
            }
          }
        }
      }
    } as ProTableProps)

    //刷新
    async function refresh() {
      await tableRef.value.table.commitProxy('query')
    }

    const rowItem = ref([] as any)
    //编辑
    function handleEdit(item: any) {
      curOptionItem.value.bannerImg = item.bannerImg
      curOptionItem.value.sequence = item.sequence
      curOptionItem.value.bannerContent = item.bannerContent
      curOptionItem.value.bannerUrl = item.bannerUrl
      isAddStyle.value = false
      showDialog.value = true
      rowItem.value = item
    }
    // 新增
    function handleAdd() {
      curOptionItem.value.bannerImg = ''
      curOptionItem.value.sequence = null
      curOptionItem.value.bannerContent = null
      curOptionItem.value.bannerUrl = null
      isAddStyle.value = true
      showDialog.value = true
    }
    //确定
    async function dialogConfirm() {
      if (!curOptionItem.value.bannerImg) {
        message.warn('请添加Banner图片')
        return
      }
      if (!curOptionItem.value.sequence) {
        message.warn('请添加Banner图排序')
        return
      }
      if (isAddStyle.value) {
        datas.value.push({
          bannerContent: curOptionItem.value.bannerContent,
          bannerImg: curOptionItem.value.bannerImg,
          bannerUrl: curOptionItem.value.bannerUrl,
          sequence: curOptionItem.value.sequence
        })
        await qzyApi
          .editQzyTopBanner({
            topBannerList: datas.value,
            consultationUrl: consultationUrl.value
          })
          .then(() => {
            message.success('保存成功')
            refresh()
          })
      } else {
        datas.value.map(item => {
          if (item._X_ROW_KEY == rowItem.value._X_ROW_KEY) {
            item.bannerImg = curOptionItem.value.bannerImg
            item.sequence = curOptionItem.value.sequence
            item.bannerUrl = curOptionItem.value.bannerUrl
            item.bannerContent = curOptionItem.value.bannerContent
          }
        })
        await qzyApi
          .editQzyTopBanner({
            topBannerList: datas.value,
            consultationUrl: consultationUrl.value
          })
          .then(() => {
            message.success('保存成功')
            refresh()
          })
      }
      showDialog.value = false
    }

    //删除
    function handleDelete(row) {
      rowItem.value = row
      isAddStyle.value = false
      showConfirm({
        content: '确认删除？',
        onOk: async () => {
          datas.value.map((item, index) => {
            if (item._X_ROW_KEY == rowItem.value._X_ROW_KEY) {
              datas.value.splice(index, 1)
            }
          })
          await qzyApi
            .editQzyTopBanner({
              topBannerList: datas.value,
              consultationUrl: consultationUrl.value
            })
            .then(() => {
              message.success('删除成功')
              refresh()
            })
        }
      })
      showDialog.value = false
    }
    async function handleSaveURL() {
      await qzyApi
        .editQzyTopBanner({
          topBannerList: datas.value,
          consultationUrl: consultationUrl.value
        })
        .then(() => {
          message.success('保存成功')
          refresh()
        })
    }
    onMounted(
      async () => (consultationUrl.value = await qzyApi.getQzyConsultation())
    )
    return {
      tableRef,
      tableConfig,
      curOptionItem,
      showDialog,
      dialogLoading,
      confirmLoading,
      liveBookingTitle,
      isAddStyle,
      handleCancel,
      dialogConfirm,
      consultationUrl,
      handleSaveURL,
      handleEdit,
      handleAdd,
      handleDelete
    }
  },
  render() {
    return (
      <div>
        <ProTable
          ref="tableRef"
          style={{
            width: '750px'
          }}
          v-slots={{
            bannerImage: ({ row }) => (
              <Image
                style={{ width: '100px', height: '80px' }}
                src={row.bannerImg}
              ></Image>
            ),
            addStyle: row => {
              return (
                <Space>
                  <span>顶部Banner:</span>
                  <Button
                    style={{
                      marginLeft: '10px'
                    }}
                    type="primary"
                    // onClick={this.handleAdd}
                    onClick={this.handleAdd}
                  >
                    新增
                  </Button>
                </Space>
              )
            },
            operation: ({ row }) => (
              <Space>
                <Button
                  type="link"
                  size="small"
                  onClick={() => this.handleEdit(row)}
                >
                  编辑
                </Button>
                <Button
                  type="link"
                  size="small"
                  onClick={() => this.handleDelete(row)}
                >
                  删除
                </Button>
              </Space>
            )
          }}
          {...this.tableConfig}
        />
        <Modal
          v-model:visible={this.showDialog}
          width={600}
          title={this.isAddStyle ? '新增' : '编辑'}
          destroyOnClose
          onOk={() => this.dialogConfirm()}
        >
          <Form labelCol={{ span: 4 }} style={{ marginTop: '15px' }}>
            <FormItem label={'上传图片'} required>
              <UploadFile v-model={[this.curOptionItem.bannerImg, 'urls']}>
                上传图片
              </UploadFile>
            </FormItem>
            <FormItem label={'排序'} required>
              <InputNumber
                placeholder={'请输入'}
                v-model:value={this.curOptionItem.sequence}
                style={{ width: '300px' }}
                min={1}
                maxlength={4}
              />
            </FormItem>
            <FormItem label="path地址">
              <Input v-model:value={this.curOptionItem.bannerUrl}></Input>
            </FormItem>
            <FormItem label="文案">
              <Input v-model:value={this.curOptionItem.bannerContent}></Input>
            </FormItem>
          </Form>
        </Modal>

        <div style={{ marginTop: '30px', marginBottom: '30px' }}>
          纤姿计划：
          <Input
            v-model:value={this.consultationUrl}
            style={{ width: '400px' }}
          ></Input>
          <Button type="primary" onClick={this.handleSaveURL}>
            保存链接
          </Button>
        </div>
      </div>
    )
  }
})
